<template>
    <div class="intellectualPropertyRight">
        <div class="list_title">
            <span class="list_name">知识产权</span>
            <p>
                <a-button class="shangchuan pointer" :class="is_modify=='Y'?'':'disabled'" @click="operationData" :disabled="is_modify=='Y'?false:true">添加</a-button>
            </p>
        </div>
        <div class="intellectualPropertyTable">
            <a-table class="table" :columns="columns" :data-source="data" :pagination="false">
                <template slot="action" slot-scope="row">
                    <img style="width:18px;height:18px;cursor: pointer;" @click="previewData(row.filePath)" src="@/assets/img/yulan.png" alt="">
                    <img v-if="is_modify === 'Y' ? true : false" style="width:18px;height:18px;margin-left:11px;cursor: pointer;"  @click="operationData(row.id, 2)" src="@/assets/img/bianji.png" alt="">
                    <img v-if="is_modify === 'Y' ? true : false" style="width:18px;height:18px;margin-left:11px;cursor: pointer;" @click="deleteData(row.id)" src="@/assets/img/shanchu1.png" alt="">
                </template>
                <template slot="zscqQlr" slot-scope="row">
                    <div v-if="row.zscqQlrArr && row.zscqQlrArr.length > 0">
                        <span v-for="(item, index) in row.zscqQlrArr" :key="index" style="padding: 0 !important;" class="ant-table-row-cell-break-word" :class="item.highlight ? 'highlight' : ''">
                            {{ item.name }}
                            {{ index != row.zscqQlrArr.length - 1 ? '、' : '' }}
                        </span>
                    </div>
                    <div v-else class="ant-table-row-cell-break-word">{{ row.zscqQlr }}</div>
                </template>
                <template slot="zscqFmr" slot-scope="row">
                    <div v-if="row.zscqFmrArr && row.zscqFmrArr.length > 0" class="ant-table-row-cell-break-word">
                        <span v-for="(item, index) in row.zscqFmrArr" :key="index" style="padding: 0 !important;" class="ant-table-row-cell-break-word" :class="item.highlight ? 'highlight' : ''">
                            {{ item.name }}
                            {{ index != row.zscqFmrArr.length - 1 ? '、' : '' }}
                        </span>
                    </div>
                    <div v-else class="ant-table-row-cell-break-word">{{ row.zscqFmr }}</div>
                </template>
            </a-table>
        </div>
        <EnclosureComponent :showFlag="showFlag" :id="id" :type="type" @enclosureEmit="enclosureEmit" />
        <testPdf :cxj_cxj_id="cxj_cxj_id" :file-path="filePath" :showPdf="showpdf"></testPdf>
    </div>
</template>

<script>
import EnclosureComponent from './index.vue'
import testPdf from '@/views/declarationSystem/declare/testPdf';
import { cxjsb_zscqList, cxjsb_zscqDelete } from '@/api/shenbao.js'
import { mapActions } from 'vuex'
export default {
    name: 'IntellectualPropertyRight',
    props: ['is_modify'],
    components: {
        EnclosureComponent,
        testPdf
    },
    data() {
        return {
            data: [],
            columns: [
                {
                    title: '序号',
                    width: 40,
                    customRender: (text, record, index) => index + 1
                },
                {
                    title: '类别',
                    dataIndex: 'zscqLb',
                    width: 80
                },
                {
                    title: '名称',
                    dataIndex: 'zscqMc',
                    width: 150
                },
                {
                    title: '国家(地区)',
                    dataIndex: 'zscqGb',
                    width: 80
                },
                {
                    title: '授权号',
                    dataIndex: 'zscqSqha',
                    width: 70
                },
                {
                    title: '授权日期',
                    dataIndex: 'zscqSqrq',
                    width: 100
                },
                {
                    title: '权利人',
                    width: 100,
                    scopedSlots: {
                        customRender: 'zscqQlr'
                    },
                },
                {
                    title: '发明人',
                    width: 100,
                    scopedSlots: {
                        customRender: 'zscqFmr'
                    },
                },
                {
                    title: '是否有效',
                    dataIndex: 'zscqZt',
                    width: 70
                },
                {
                    title: '在项目完成人中排序',
                    dataIndex: 'bz2',
                    width: 100,
                    customRender: (text, record) => {
                        return text || '--'
                    }
                },
                {
                    title: '在项目完成单位中排序',
                    dataIndex: 'bz1',
                    width: 110,
                    customRender: (text, record) => {
                        return text || '--'
                    }
                },
                {
                    title: '操作',
                    fixed: 'right',
                    width: 110,
                    scopedSlots: {
                        customRender: 'action'
                    },
                },
            ],
            showFlag: false,
            showpdf: false,
            id: '',
            type: '',
            filePath: '',
            cxj_cxj_id: this.$route.query.cxj_cxj_id
        }
    },
    mounted() {
        this.get_cxjsb_zscqList();
    },
    methods: {
        ...mapActions('fillingSteps', ['getStatus']),
        operationData(id, type = 1) {
            if (type === 2) {
                this.id = id;
            }
            this.type = type;
            this.showFlag = !this.showFlag;
        },
        get_cxjsb_zscqList() {
            let self = this;
            cxjsb_zscqList({cxj_cxj_id: self.cxj_cxj_id}).then(res=>{
                if (res.data.code == '200') {
                    self.data = res.data.result;
                    self.data.forEach(item => {
                        if (item.bz1) { // 完成单位及其排序
                            item.bz1Arr = self.formatStr(item.bz1)
                            // 权利人和完成单位比对
                            item.zscqQlrArr = item.zscqQlr.split('、').map(name => {
                                return {
                                    name,
                                    highlight: false
                                }
                            }).map(v => {
                                item.bz1Arr.forEach(j => {
                                    if (v.name === j.name) {
                                        v.highlight = true
                                    }
                                })
                                return v;
                            })
                        }
                        if (item.bz2) { // 完成人及其排序
                            item.bz2Arr = self.formatStr(item.bz2)
                            // 发明人和完成人比对
                            item.zscqFmrArr = item.zscqFmr.split('、').map(name => {
                                return {
                                    name,
                                    highlight: false
                                }
                            }).map(v => {
                                item.bz2Arr.forEach(j => {
                                    if (v.name === j.name) {
                                        v.highlight = true
                                    }
                                })
                                return v;
                            })
                        }
                    })
                }
            })
        },
        formatStr(str) {
            // 先将字符串按"、"分割成数组
            let arr1 = str.split("、");
            // 遍历数组，再将每个元素按"("和")"分割成名称和排序组成对象
            let result = arr1.map(item => {
                let parts = item.split("(");
                return {name: parts[0], sort: "(" + parts[1]};
            });
            return result;
        },
        enclosureEmit() {
            this.getStatus(this.cxj_cxj_id)
            this.get_cxjsb_zscqList();
        },
        previewData(filePath) {
            this.showpdf = !this.showpdf;
            this.filePath = filePath;
        },
        deleteData(id) {
            let self = this;
            this.$confirm({
                content: '确定要删除该项吗？',
                onOk() {
                    cxjsb_zscqDelete({
                        cxj_cxj_id: self.cxj_cxj_id,
                        id: id
                    }).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            self.$message.success('删除成功');
                            self.get_cxjsb_zscqList();
                        } else {
                            self.$message.error(data.message);
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    self.$destroyAll();
                },
            });
        },
    }
}
</script>

<style lang="less" scoped>
/deep/.ant-table-column-title {
    font-size: 10px !important;
}
/deep/.ant-table-row-cell-break-word {
    font-size: 12px !important;
    padding: 5px !important;
}
.tabCommonTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 25px;
    .list_name {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #3388EE;
    }
}
.intellectualPropertyTable {
    margin-top: 20px;
}

.shangchuan {
    width: 70px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    border: 1px solid #3388EE;
    background: #3388EE;
    margin-left: 10px;
    border-radius: 4px;
    display: inline-block;
}
.highlight {
    color: red !important;
}
</style>

